{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"地址编辑",back:1} %}
    <div class="pad5 fs8 c12">
        基本信息
    </div>
    <div class="bcf marlr5">

        <div class="bcf pad6 round3 bdbda fs9 mart5 c11 pos-r">
            <div class="flrc">
                <div class="flex1">地区信息</div>
                <div class="pad5 fs8" v-if="!isTrue(province)">
                    <span class="c12">未设置</span>
                </div>
                <div class="pad5 fs8 tar" v-if="isTrue(province)">
                    {#                    <div class="c01" >已设置</div>#}
                    <div>[[isTrue(province )?province :"未设置"]] / [[isTrue(city )?city :"未设置"]] / [[isTrue(area )?area :"未设置"]]</div>
                </div>
                <div class=""><span class="fa fa-angle-right"></span></div>
                <mu-ripple @click="pcaShowFunc()"></mu-ripple>
            </div>
        </div>
        <div class="bcf pad6 round3 bdbda fs9 mart5 c11 pos-r">
            <div class="flrc">
                <div class="flex1">地图标注</div>
                <div class="pad5 fs8" v-if="!isTrue(lat)">
                    <span class="c12">未设置</span>
                </div>
                <div class="pad5 fs8 tar" v-if="isTrue(lat)">
                    <div class="c01" >已设置</div>
                    <div class="fs6 c12">[[lat]] / [[lon]]</div>
                </div>
                <div class=""><span class="fa fa-angle-right"></span></div>
                <mu-ripple @click="goto('mapPicker')"></mu-ripple>
            </div>
        </div>

        <div class="pad5">
            <mu-text-field label="详细地址" placeholder="设置标注后可以快捷输入" v-model="address" full-width multi-line :rows="3" max-length="200" :rows-max="6" help-text=""></mu-text-field>
            <div class="pad5 mart5 bdda fs8" v-if="mapPickerDataShow">
                <div class="flrc">
                    <div class="flex1">智能提示，点击填入</div>
                    <div class="pos-r"><mu-button small @click="hideFastInput()" icon> <mu-icon value="close"></mu-icon></mu-button></div>
                </div>
                <div class="flex-c">
                    <div class="mar3"  v-if="isTrue(mapPickerData.city)"><mu-button @click="setAddress(mapPickerData.city)" small plat full-width>[[mapPickerData.city]]</mu-button></div>
                    <div class="mar3"  v-if="isTrue(mapPickerData.name)"><mu-button @click="setAddress(mapPickerData.name)" small plat full-width>[[mapPickerData.name]]</mu-button></div>
                    <div class="mar3"  v-if="isTrue(mapPickerData.address)"><mu-button @click="setAddress(mapPickerData.address)" small plat full-width>[[mapPickerData.address]]</mu-button></div>
                    <div class="mar3"><mu-button @click="address = ''" small plat full-width>清除</mu-button></div>
                </div>

            </div>
        </div>
        {#<div class="pad5">#}
            {##}
        {#</div>#}

    </div>
    <div class="pad5 fs8 c12">
        选择标签
    </div>
    <div class="bcf marlr5">
        <div class="pad5 bdbso">
            <div v-if="!isTrue(tags)" class="pad5 tac c12 fs8 bdda round3">未选择</div>
            <mu-chip @click="delTag(item)" color="amber700" class="mar3" v-for="item in tags">[[item]]</mu-chip>
        </div>
        <div class="pad5 lh15">
            <mu-chip @click="addTag(item)" class="mar3" color="grey500" inverse v-for="item in tagPool">[[item]]</mu-chip>
        </div>
    </div>
    <div class="pad10">
        <mu-button @click="submit()" round large :color="c1" full-width>保存</mu-button>
    </div>


    <div class="pos-f b0 l0 r0  bcf shadow3" style="height: 50vh;overflow-y: scroll;" v-if="pcaShow">
        <div class="pos-f l0 r0 bcf fs8 c12 lh2 padlr5 bdbso padt6 padb3">
            <div class="list-style-2 flrc">
                <div class="flex1">地区选择器</div>
                <div class="pos-r"><mu-button small @click="pcaShowFunc()" icon> <mu-icon value="close"></mu-icon></mu-button></div>
            </div>
            <div class="flrc tac mart5">
                <div class="flex1" :class="pcaStep == 1?'fwb c13 bc1':''">省份</div>
                <div class="flex1" :class="pcaStep == 2?'fwb c13 bc1':''">城市</div>
                <div class="flex1" :class="pcaStep == 3?'fwb c13 bc1':''">县区</div>
            </div>
        </div>
        <div class="pad5 mart50 c12 fs8 lh2">
            <div v-if="pcaStep == 1">
                <div @click="setP(pIndex,p)" class="pad5 bdbdo pos-r" v-for="p,pIndex in orgData">[[p.name]] <mu-ripple></mu-ripple></div>
            </div>
            <div v-if="pcaStep == 2">
                <div @click="setC(cIndex,c)" class="pad5 bdbdo pos-r" v-for="c,cIndex in pro.sons">[[c.name]] <mu-ripple></mu-ripple></div>
            </div>
            <div v-if="pcaStep == 3">
                <div @click="setA(aIndex,a)" class="pad5 bdbdo pos-r" v-for="a,aIndex in cit.sons">[[a.name]] <mu-ripple></mu-ripple></div>
            </div>
        </div>
    </div>

{% endblock %}
{% block myJs %}
    <script src="{{ root }}/js/city.js{{ rnd }}"></script>
{% endblock %}